<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-tabs v-model="activityName" class="demo-tabs">
        <el-tab-pane label="合理性分析" name="first">
          <el-row>
            <el-col :span="18">
              <el-tabs
                tab-position="left"
                :style="'height:' + height + 'px'"
                class="demo-tabs"
                ref="heightRef"
                v-model="jclbTabs"
                @tab-change="jclbTabChange"
              >
                <!-- <el-tab-pane label="基础数据" name="first">
                  <tableView/>
                </el-tab-pane>
                <el-tab-pane label="检测方案" name="scenod"
                  ><tableView
                /></el-tab-pane> -->
                <el-tab-pane
                  v-for="item in jclbList"
                  :label="item.jclbName"
                  :name="item.jclbId"
                  ><tableView
                    v-if="jclbTabs == item.jclbId"
                    ref="jclbTableRef"
                    @getSJId="getSJId"
                /></el-tab-pane>
              </el-tabs>
            </el-col>
            <el-col
              :span="6"
              style="border-left: 2px solid #e4e7ed; padding: 5px"
            >
              <el-tabs class="demo-tabs" v-model="tabs">
                <el-tab-pane label="原始记录" name="third" :disabled="!sJId">
                  <traceability
                    v-if="tabs == 'third'"
                    :sJId="sJId"
                    ref="traceabilityRef"
                  />
                </el-tab-pane>
                <el-tab-pane label="数据规律" name="first">
                  <treelaw ref="treelawRef" @getColor="getColor" />
                </el-tab-pane>
                <el-tab-pane label="历史比较" name="scond" :disabled="!sJId">
                  <historicalComparison
                    :sJId="sJId"
                    ref="historicalRef"
                    @getColor="getColor"
                  />
                </el-tab-pane>
                <!-- <el-tab-pane label="评价限值">
                  <el-row style="justify-content: end">
                    <div>
                      <span
                        style="
                          display: inline-block;
                          vertical-align: middle;
                          width: 15px;
                          height: 15px;
                          background-color: yellow;
                        "
                      ></span>
                      <span
                        style="
                          display: inline-block;
                          vertical-align: middle;
                          font-size: 15px;
                          margin-left: 8px;
                        "
                        >评价限值异常颜色</span
                      >
                    </div>
                  </el-row>
                  <el-row>
                    <p class="pinformation">评价限值列表</p>
                    <p class="totalStyle">共 {{ 12 }} 条数据</p>
                    <el-button
                      link
                      style="margin-bottom: 5px; margin-left: 10px"
                      >编辑</el-button
                    >
                    <el-button type="success" size="small">确定</el-button>
                  </el-row>
                  <el-table :data="pjList">
                    <el-table-column
                      prop="jcxm"
                      label="检测项目"
                      align="center"
                    >
                      <template #default="scope">
                        <span
                          v-html="proxy.getSupAndSub(scope.row.jcxm)"
                        ></span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="sx" label="上限值" align="center" />
                    <el-table-column prop="xx" label="下限值" align="center" />
                    <el-table-column prop="unit" label="单位" align="center" />
                    <el-table-column
                      prop="pjStarante"
                      label="评价标准"
                      align="center"
                    />
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="其它">
                  <el-button link v-if="syEnable" @click="handleCreateSySampleCode">生成送样方案的样品编号</el-button>
                </el-tab-pane> -->
              </el-tabs>
            </el-col>
          </el-row>
        </el-tab-pane>
        <!-- <el-tab-pane label="质控统计" name="second">
          <el-row>
            <el-col :span="16">
              <el-tabs
                tab-position="left"
                :style="'height:' + height + 'px'"
                class="demo-tabs"
              >
                <el-tab-pane label="现场平行"><two-table-view /></el-tab-pane>
                <el-tab-pane label="试验室平行"><two-table-view /></el-tab-pane>
                <el-tab-pane label="全程序空白"><two-table-view /></el-tab-pane>
                <el-tab-pane label="基本加标"><two-table-view /></el-tab-pane>
                <el-tab-pane label="空白加标"><two-table-view /></el-tab-pane>
                <el-tab-pane label="标样"><two-table-view /></el-tab-pane>
                <el-tab-pane label="运输空白"><two-table-view /></el-tab-pane>
              </el-tabs>
            </el-col>
            <el-col
              :span="8"
              style="border-left: 2px solid #e4e7ed; padding: 5px"
            >
              <el-row>
                <p class="pinformation">不合格质控列表</p>
                <p class="totalStyle">共 {{ 12 }} 条数据</p>
              </el-row>
              <el-table :data="unqualified">
                <el-table-column
                  prop="sampleCode"
                  label="样品编号"
                  align="center"
                  width="140"
                />
                <el-table-column
                  prop="jcxmName"
                  label="检测项目"
                  align="center"
                />
                <el-table-column prop="z" label="检测值" align="center" />
                <el-table-column prop="unit" label="单位" align="center" />
                <el-table-column label="原始记录" align="center" width="150">
                  <template #default="scope">
                    <el-button link>查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import tableView from "./tableView";
import treelaw from "./cnsp/treelaw";
import historicalComparison from "./cnsp/historicalComparison";
import traceability from "./cnsp/traceability";
import twoTableView from "./twoTableView";
import { getJclbTab } from "@/api/dataAnalysis/selectProject";
import useRouteView from "@/store/modules/routeView";
import { nextTick } from "vue";
import {
  getSyProject,
  createSySampleCode
} from "@/api/contract/project";
const { proxy } = getCurrentInstance();
const route = useRoute();
const activityName = ref("first");
const jclbTabs = ref("first");
const height = ref(0);
const tabs = ref("first");
const jclbTableRef = ref(null);
const treelawRef = ref(null);
const historicalRef = ref(null);
const traceabilityRef = ref(null);
const jclbList = ref([]);
const syEnable = ref(false);
const pjList = ref([
  {
    jcxm: "苯",
    sx: "0.1",
    xx: "0.3",
    unit: "mg/L",
    pjStarante: "HJ1243-2209",
  },
  {
    jcxm: "甲苯",
    sx: "0.8",
    xx: "0.2",
    unit: "mg/L",
    pjStarante: "HJ1243-2039",
  },
  {
    jcxm: "二甲苯",
    sx: "0.3",
    xx: "0.2",
    unit: "mg/L",
    pjStarante: "HJ1243-2409",
  },
  {
    jcxm: "三甲苯",
    sx: "0.4",
    xx: "0.1",
    unit: "mg/L",
    pjStarante: "HJ1243-20549",
  },
]);
const unqualified = ref([
  {
    sampleCode: "G202303015001-xp",
    jcxmName: "总磷",
    z: "4.2",
    unit: "L",
  },
  {
    sampleCode: "G202303031002-xp",
    jcxmName: "氮",
    z: "3.3",
    unit: "mg/L",
  },
  {
    sampleCode: "G202230301003-xp",
    jcxmName: "磷",
    z: "2.3",
    unit: "mg/ml",
  },
  {
    sampleCode: "G202303101004-xp",
    jcxmName: "总磷",
    z: "1.2",
    unit: "mg",
  },
]);

function getHeight() {
  height.value =
    document.documentElement.clientHeight -
    proxy.$refs["heightRef"].$el.getBoundingClientRect().top -
    21;
}

function jclbTabChange(name) {
  nextTick(() => {
    if (name == "first") {
    } else if (name == "scenod") {
    } else {
      treelawRef.value?.getList(name);
      jclbTableRef.value[0].getTable({
        projectId: projectId.value,
        jclbId: name,
      });
      tabs.value = "first";
      sJId.value = "";
    }
  });
}
const sJId = ref();
function getSJId(val) {
  sJId.value = val;
  tabs.value = "third";
  historicalRef.value?.getForm();
  traceabilityRef.value?.getForm();
}

const projectId = ref("");
nextTick(() => {
  syEnable.value = false;
  projectId.value = route.query.projectId;
  getJclbTab(projectId.value).then((res) => {
    jclbList.value = res.data;
    if (jclbTabs.value.length > 0) {
      jclbTabs.value = jclbList.value[0].jclbId;
      treelawRef.value.getList(jclbList.value[0].jclbId);
      nextTick(() => {
        jclbTabChange(jclbTabs.value);
      });
    }
  });
  getIsSyProject();
});

function getColor(val) {
  let tempList = val.data.map((item) => {
    return item.relId;
  });
  jclbTableRef.value[0].getColor({ data: tempList, class: val.class }, 1);
}

function getIsSyProject(){
  getSyProject(projectId.value).then(res => {
    if(!res.data){
      return;
    }
     syEnable.value = res.data.sampleCount == 0;
  })
}

function handleCreateSySampleCode(){
  createSySampleCode(projectId.value).then(res => {
    proxy.$modal.msgSuccess(res.msg);
  })
}

const routeViewStore = useRouteView();
nextTick(() => {
  const { path, name, meta } = route;
  routeViewStore.setRouteView2({ path, name, meta });
}); 

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
  });
});
onUpdated(() => {
  nextTick(function () {
    getHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>

<style></style>
